
//2  提示框：消息 ， 确认框，通知，通知2
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

// 消息
export const openMsg = () => {
    ElMessage({
        type: 'success', // success | warning | info | error
        message: 'www.com',
        showClose: true
    })
}

// 确认框
export const openConfirm = () => {
    ElMessageBox.confirm('确认删除?', '标题', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
    }).then(() => {
        console.log('确认')  //点击 确认按钮后，执行这里
    }).catch(() => {
        console.log('取消')  //点击 取消按钮后，执行这里
    })
}

// 通知
export const openNotifiy = () => {
    ElNotification({
        title: '标题',
        message: '编程',
        duration: 1500 // 展示时间 [单位:毫秒]
    })
}

// 通知2
export const openNotifiy2 = () => {
    ElNotification({
        type: 'success', // success | warning | info | error
        title: '标题',
        message: 'www.com',
        duration: 1500,
        position: 'bottom-right' //通知的位置
    })
}

//3 导航: 默认选中的菜单索引
import { reactive, ref } from 'vue'
//const selectedIndex = ref("2-2")
export const selectedIndex = ref("3") //当 state.count 增加时，Vue.js 会自动检测到变化并更新视图，显示更新后的计数。

//选中菜单触发的回调
export const selected = (index: string, indexPath: string[]) => {
    console.log("index", index, "indexPath", indexPath);
};

//3 导航: 默认展开的菜单索引
export const defaultOpeneds = ref(["1", "3"]) //使用的时候，要写成这样的EleUISet.defaultOpeneds.value


//5 下拉菜单 ：用户执行的命令
export const userCommand = (command: string) => { //点击菜单触发的回调 ，结果为order，logout
    console.log("command:", command)
}


// 6 tab 标签页面----
//import { ref, reactive } from 'vue'

//默认选中的标签名称
export const selectedName = ref("2")

//选中标签触发的回调
export const tabClick = (tab: any, event: any) => {
    console.log("tab", tab.props, "event", event)
}

// tab 的动态 添加 、移除
export const tab = reactive({
    arr: [
        { name: "1", title: '邓瑞', content: '内容1' },
        { name: "2", title: '邓瑞编程', content: '内容2' },
        { name: "3", title: 'dengruicode.com', content: '内容3' },
    ]
})

//动态 添加
export const tabAdd = () => {
    let index = tab.arr.length
    index++
    tab.arr.push({
        name: index.toString(),
        title: '新选项卡' + index,
        content: '内容' + index
    })
}

//动态 移除
export const tabRemove = (name: any) => {
    console.log("name:", name)

    const index = tab.arr.findIndex((value) => {
        return value.name === name
    })

    tab.arr.splice(index, 1) //移除元素
}


// 7 输入框
export const name = ref('') //ui EleUISet.name.value
export const password = ref('')
export const content = ref('邓瑞编程')
export const url = ref('dengruicode.com')
export const url2 = ref('dengruicode')
export const email = ref('123456')

//const selected = ref('')
export const selected_input = ref('2') //选中的下拉框

// 8.单选框、复选框 
//单选框
export const radio = ref("3")
export const radio2 = ref("b")
export const radio3 = ref("C")

export const radioChange = (val: any) => {
    console.log("radioChange:", val)
}

export const radioGroupChange = (val: any) => {
    console.log("radioGroupChange:", val)
}

//复选框
export const checked = ref(["1", "2"])
export const checked2 = ref([])

export const checkboxGroupChange = (val: any) => {
    console.log("checkboxGroupChange", val)
}



//9 下拉框

export const selected1 = ref('2')
export const selected2 = ref('')
export const selected3 = ref('C')
export const selected4 = ref(['1', '3'])

export const data = reactive({
    options: [
        { value: 'A', label: '前端', },
        { value: 'B', label: '后端', },
        { value: 'C', label: '服务端', }
    ]
})

//回调
export const selectChange = (val: any) => {
    console.log("selectChange:", val)
}

//10 日期 选择器
export const date = ref('')

export const dateChange = (val: any) => {
    console.log("dateChange:", val)
}

// 11  表单el-form：只是把前面的选择 ，输入融合在一起
export const formdata = ref({  // ele 使用的时候，这样写：EleUISet.formdata.value.name
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
})

export const formadd = () => {
    console.log(formdata.value)
}

export const formreset = () => {
    formdata.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
}

//12 对话框 el-dialog
export const dialogdata = ref({
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
})

export const dialogadd = () => {
    console.log(dialogdata.value)
}

export const dialogreset = () => {
    dialogdata.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
}

//12 对话框
export const dialog = ref(false) // ui 的写法： EleUISet.dialog.value

export const dialogClose = () => {
    console.log("关闭")
}

// 13 分页
export const currentPage = (val: any) => {
    console.log("currentPage:", val)
}


//14 表格----
export const table_data = ref({
    arr: [
        { id: '1', name: '邓瑞', web: 'dengruicode.com', date: '2023-06-20' },
        { id: '2', name: 'David', web: 'www.dengruicode.com', date: '2023-06-21' },
        { id: '3', name: 'Luna', web: 'dengruicode.com', date: '2023-06-22' },
        { id: '4', name: 'Lisa', web: 'www.dengruicode.com', date: '2023-06-22' }
    ]
})

//选中的复选框
let idArr: number[] = []
export const table_selected = (data: any) => {
    //console.log("selected", data)

    idArr = [] //重置

    data.forEach((value: any) => {
        idArr.push(value.id)
    })

    console.log("idArr:", idArr)
}

//删除
export const table_del = (idArr:any) => {
    console.log("del:", idArr)
}

//编辑
export const table_edit = (index:any, row:any) => {
    console.log("index:", index, "row:", row)
}












// 使用 export * as 批量导出对象中的所有属性
export * as EleUISet from './element-plusUI_set';